/**************    header    **************/
.header-swipper{
    .header-top{
        width:100%;
        height: 0.44rem;
        padding: 0 0.07rem;
        background:#fff;
        display: flex;
        justify-content: space-between;
        align-items: center;      
        .header-top__logo{
            width: 0.62rem;
            height: 0.28rem;
            margin:0 0.1rem;
        }
        .header-top__right{
            height:0.4rem;
            display: flex;
            align-items: center;
            padding: 0.05rem 0;
             .userBox_pic{
                width: 0.24rem;
                height: 0.24rem;
                margin:0 0.2rem;
                border-radius: 50%;
            } 
            p{
                height: 0.28rem;
                padding:0 0.1rem;
                line-height: 0.28rem;
                font-size: 0.1rem;
                color: #FFFFFF;
                text-align: center;
                background: #fb7299;
                border-radius: 0.05rem;
            }
        }
    }
    .header-nav{
        width:100%;
        height: 0.44rem;  
        background:#fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-nav__box{
            width: 90%; 
            margin:0;             
            .swiper-slide{  
                width: 20%!important;
                height: 0.44rem;
                text-align: center;
                line-height: 0.44rem;
            }      
        }
        .header-nav__downIcon{
            width: 10%;       
            height: 0.44rem;
            line-height: 0.44rem;
            text-align: center;
            font-size: 0.1rem;;
            position: absolute;
            right: 0rem;
            top: 0.44rem;
           
        }
    }
    .header-hideNav{
        display: none;
        width:100%;
        background:#fff;
        height: 1.6rem;
        position: absolute;
        top: 0.44rem;
        z-index:50;
        .header-hideNav__list{       
            display:flex;
            flex-wrap:wrap;
            li{
                width: 20%;
                text-align: center;
                height: 0.4rem;
                line-height: 0.4rem;
            }
        }
        .header-hideNav__upIcon{
            height:0.4rem;
            font-size: 0.1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    }
}




/**************    container    **************/
.container-box{
    width:100%;
    padding-top:0.02rem;
    .container-header{
        width:100%;
        height:0.53rem;
        padding:0 0.12rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h5{
            font-size:0.16rem;
            font-weight:normal;
            i{
                margin-right:0.05rem;
            }
        }
        .ranking{
            color:#FFA626;
            b{
                font-size:0.13rem;
                margin:0 0.05rem;
            }
            i:nth-of-type(2){
                color:#999;
            }
        }
    }
    .container-list{
        width:100%;
        padding:0.06rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: center;
        .container-list__item{
            width:1.7rem;
            margin-bottom:0.16rem;
            .container-list__item--content{
                position:relative;
                width:100%;
                border-radius:0.05rem;
                background:#666;
                img{
                    width:1.7rem;
                    height: 1.06rem;
                    border-radius:0.05rem;
                }
                p{
                    position: absolute;
                    bottom:0;
                    width:100%;
                    height: 0.16rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span{
                        font-size:0.06rem;
                        color:#fff;
                        flex:1;
                        display: flex;
                        align-items: center;
                        text-align: left;
                        .iconfont{
                            margin:0 0.08rem;
                        }
                        .icon-mulu{
                            font-size:0.05rem;
                        }
                        b{
                            font-weight:normal;
                        }
                    }
                }
            }
            .container-list__item--title{
                width:100%;
                height: 0.32rem;
                word-break: break-all;
                text-align: left;
                margin-top:0.05rem;
                overflow:hidden;
                font-size:0.13rem;
                line-height:0.15rem;
            }
           
        }
    }
    
}
